<template>
  <div class="banner">

    <div class="banner_content">

      <div class="header">
        <van-nav-bar
        	right-text="地图模式"
				left-arrow


          title="智能回收柜"
          @click-right="onClickRight"
          @click-left="onClickLeft">

          <!--<van-icon name="chat-o" slot="right" />-->
        </van-nav-bar>
      </div>



      <div class="list-content" id="list-content">
      	 <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
             <van-list
               v-model="loading"
               :finished="finished"
               @load="onLoad"
               finished-text="没有更多了"
               :immediate-check="immediate"
               :offset="10"
             >

                <!--循环部分--->
                <div class="city_list list-item" v-for="(equ,j) in equs" :key="j" @click="to_detail(j)">
						      <div style="background: #FFFFFF;" class="city_list_item">
						         <p>
						         	  <span style="font-weight: bold;">{{equ.device_name}}</span>
						         </p>

					         <p class="p_city">

					         	  <!--<van-icon name="location-o" style="vertical-align: middle;"/>-->
					         	  <span style="vertical-align: middle;width: 41vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;">{{equ.address}}</span>
					         	  <van-icon name="arrow" style="vertical-align: middle;"/>
					         </p>

								</div>

				      <div class="flex_shouye">
					        <div
					          v-for="(inner, i) in equ.inner_list"
					          :key="i"
					          >
					          <div style="position: relative">
					            <img src="../../assets/weixiu.png" v-show="inner.inner_status =='3'" style="right: -3px;position: absolute;width: 5vw;top: -6px;"/>
					            <img src="../../assets/zanman.png" v-show="inner.inner_status =='2'" style="right: -3px;position: absolute;width: 5vw;top: -6px;"/>
					            <img :src="inner.img_src" />
					          </div>
					          <p><span>{{inner.inner_type_name}}</span></p>
					        </div>
					    </div>
					   </div>

					   <!--描述：循环结束-->



					</van-list>
      </van-pull-refresh>
   </div>



</div>
</div>






</template>
<script>
    import {Toast} from 'vant'
    import { Dialog } from 'vant';
    export default {
        data() {
            return {
                equ:'',
                equs:[],
                inner_list:[],
                page:0,
                isLoading:false,
                loading: false,   //是否处于加载状态
                finished: false,  //是否已加载完所有数据
                immediate:false

            }
        },

        mounted:function(){
            this.equ = JSON.parse(this.$route.query.equ);
        	  let winHeight = document.documentElement.clientHeight;                        //视口大小
            document.getElementById('list-content').style.height = (winHeight - 46) +'px'  //调整上拉加载框高度
            this.get_equ(0);

        },
        methods:{
            onClickLeft() {
                this.$router.go(-1);
            },
            onClickRight(){
                this.$router.push({
                    path:'/city',
                    query:{equ:JSON.stringify(this.equ)}
                })
            },
            to_detail(j){
                this.equ = this.equs[j];
                this.$router.push({
                    path:'/city',
                    query:{equ:JSON.stringify(this.equ)}
                })
            },
            onRefresh(){
                console.log("下拉刷新");
                const  that = this;
                that.isLoading = true;

                that.page = 0;
                that.equs=[];
                that.get_equ(0);

            },
            onLoad() {
                console.log("上拉加载");
                console.log(this.finished);
                if(this.msgs.length != 0){
                    this.page = this.page+1;
                }
                this.get_equ(1);

            },



            get_equ(type){
                const that = this;
                that.$sendRequest('/index/get_equ',"type=1&lon=&lat=").then(function(res){
                    console.log(res.data);
                    that.isLoading = false;
                    that.loading = false;
                    if(res.data.code == 0){
                        //that.equ = res.data.result.equs[0];
                        if(res.data.result.equs.length < 10){
                            that.finished = true;
                        }
                        for(var j = 0;j<res.data.result.equs.length;j++){
                            let e = res.data.result.equs[j];
                            let inner_list = e.inner_list;
                            for(var i = 0;i<inner_list.length;i++){
                                if(inner_list[i].inner_type=='401'){
                                    inner_list[i].img_src =require("../../assets/zhilei.png")
                                }else if(inner_list[i].inner_type=='402'){
                                    inner_list[i].img_src = require("../../assets/jinshu.png")
                                }else if(inner_list[i].inner_type=='403'){
                                    inner_list[i].img_src = require("../../assets/01.png")
                                }else if(inner_list[i].inner_type=='404'){
                                    inner_list[i].img_src = require("../../assets/boli.png")
                                }else if(inner_list[i].inner_type=='408'){
                                    inner_list[i].img_src = require("../../assets/408.png")
                                }else if(inner_list[i].inner_type=='416'){
                                    inner_list[i].img_src = require("../../assets/suliaoping.png")
                                }
                            }
                            that.equs.push(e);
                        }
                        if(type ==0){
                            that.finished = false;
                        }



                    }
                })
            }

        }
    }
</script>
<style scoped="scoped">
  /**{
    margin: 0;
    padding: 0;
  }*/
 .header >>>.van-nav-bar__text{
 	color: #000000;
 }
 .header >>> .van-nav-bar .van-icon{
 	color: #000000;
 }

   .list-content{
       /* margin-top:46px;*/
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }

 .qrcode_img{
 	display: flex;
 	justify-content: space-between;
 	margin-left: 2vh;
 	margin-right: 2vh;
 	border-bottom: 1px solid #F6F6F6;
 }
 .qrcode_img img{
 	  width: 6vw;
 }
 .Span_contnt{
 	width: 0.5vw;
 	height: 3vh;
 	display: inline-block;
 	vertical-align: middle;
 	background: #4C9FFD;
 }
 .qrcode_img{
 	height: 5vh;
 	line-height: 5vh;
 }
 .qrcode_img img{
 	vertical-align: middle;
 }
  .jife{
    color: #999999;
    font-size: 12px;
  }
  .banner{
    background: #F6F6F6;
  }
  .city_list_item{
  	display: flex;
  	justify-content: space-between;
  	padding: 3vw;
  }
  .city_list_item p{
  	font-size: 14px;
  }
  .city_list_item .p_city{
  	font-size: 12px;
  	color: #999;
  	vertical-align: middle;

  }

  .coollelt >>> [class*=van-hairline]::after{
    border:none;
  }
  .coollelt>>>.van-icon-home-o:nth-child(1){
    background: #4C9FFD;
    border-radius: 50%;
    color: #FFFFFF;
    padding: 12px;
  }
  .flex_shouye{
    display: flex;
    justify-content: space-around;
    background: #FFFFFF;
    padding: 3vw;

  }
  .flex_shouye div{

    flex: 1;

  }
  #felex_idcon{
    background: #4C9FFD;
    color: #FFFFFF;
  }

  #felex_idcon .jife{
    color: #FFFFFF;
  }
  .flex_shouye div img{
    width: 9vw;
  }
  .banner_content{

  	height: 100vh;
  }
  .list_header_content {
  	line-height: 4vh;
    height: 4vh;
    background: rgb(255, 255, 255);
    text-align: left;
    padding-left: 1vw;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .flex_shouye span{
    font-size: 12px;
  }
  .city_list{
  	margin-top: 1vh;
  	margin-bottom: 1vh;
  }
</style>

